<!DOCTYPE HTML>
<html>
<head>
	<style>
	p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%)
	}
	</style>
</head>
<body>
<p id="demo"></p>
<script>
	var var1=setInterval(inTimer,1000);
	var fs=5;
	var ids=document.getElementById("demo");
	function inTimer()
	{
	ids.innerHTML="TEXT GROWING";
	ids.setAttribute('style',"font-size: "+fs+"px; color: red");
	fs+=5;
	if(fs>=50)
	{
	clearInterval(var1);
	var2=setInterval(deTimer,1000);
	}
	}
	function deTimer()
	{
	ids.innerHTML="TEXT SHRINKNG";
	ids.setAttribute('style',"font-size: "+fs+"px; color: blue");
	fs-=5;
	if(fs==5)
	{
	clearInterval(var2);
	
	}
	}
</script>
</body>
</html>	